<script lang="ts">
export default {
  name: "PmButton",
};
</script>

<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    iconfont?: string;
    iconSize?: number | string;
    active?: boolean;
    fullContent?: boolean;
  }>(),
  {
    active: false,
    fullContent: false,
    iconSize: 3,
  }
);

const iconSize = computed(() => {
  if (typeof props.iconSize === "number") {
    return `${props.iconSize}rem`;
  } else {
    return props.iconSize;
  }
});
</script>

<template>
  <el-button
    class="pm-button"
    :class="{ 'pm-button-active': active, fullContent }"
  >
    <template #default>
      <i class="iconfont" v-if="iconfont" :class="iconfont" />
      <slot />
    </template>
  </el-button>
</template>

<style lang="less" scoped>
.pm-button {
  box-sizing: border-box;
  border-radius: 0 !important;
  border: none;
  padding: 1rem !important;
  -webkit-app-region: no-drag;
  height: auto;
  overflow: hidden;
  position: relative;
  color: var(--pm-el-text-color);

  --el-border: none;
  --el-button-bg-color: var(--pm-el-background-color);
  --el-button-hover-bg-color: var(--pm-el-background-color);
  --el-button-active-bg-color: var(--pm-el-button-active-bg-color);
  --el-button-hover-text-color: var(--pm-el-text-color);

  &.fullContent:deep(> span) {
    width: 100%;
    height: 100%;
    min-height: 2rem;
  }
  .iconfont {
    font-size: v-bind("iconSize");
  }
}
.el-button + .el-button {
  margin-left: 0;
}
</style>
